<template>
	<view>
		<view>
			<tabs :type="list" v-model="tabActive"></tabs>
			<!-- <view>{{ active3 }}</view> -->
		</view>
		<view class="margin-top-sm" v-if="!hasUserinfo">
			<loginNotice></loginNotice>
		</view>
		<view>
			<swiperGesture :lrDistance="3" leftMed="leftToRight" rightMed="rightToLeft" @leftToRight="leftToRight"
				@rightToLeft="rightToLeft">

				<view class="swiper-container flex w-100" >
					<view v-if="articles.length > 0" class="w-100">
						<view v-for="article in articles" class="margin-tb-sm" :key="article.id">
							<indexArticleCard :article="article"></indexArticleCard>
						</view>
					</view>
					<view v-else class="w-100 flex margin-tb-sm">
						<emptyContent class="w-100 h-100"></emptyContent>
					</view>
				</view>

			</swiperGesture>
		</view>
	</view>
</template>
<script>
import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				list: [],
				tabActive: 0,
				articles: [],
        // hasLogin: false
			}
		},
    mounted(){
      this.getArticleCategories()
    },
    computed: {
      ...mapGetters({
        hasUserinfo: 'user/hasUserinfo'
      }),
    },
		watch: {
			tabActive(val, oldVal) {
				this.getArticlesByCategory(this.list[val].id)
			}
		},
		methods: {
			getArticleCategories() {
				this.$api.getArticleCategories().then(res => {
						this.list = res
						for (const i of this.list) {
							i.title = i.name
						}
					})
					.then(() => {
						this.getArticlesByCategory(this.list[0].id)
					})
			},
			getArticlesByCategory(id) {
				this.$api.getArticlesByCategory(id).then(res => {
					this.articles = res
				})
			},
			leftToRight() {
				if (this.tabActive < this.list.length -1) {
					this.tabActive += 1;
				}
			},
			rightToLeft() {
				if (this.tabActive > 0) {
					this.tabActive -= 1;
				}
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container {
		min-height: calc(90vh - 300upx);
	}
</style>
